<template>
  <div class="score-card">
    <div class="card-header">
      <h2>芝麻分数</h2>
      <button @click="toggleDateOptions">日期</button>
    </div>
    <div class="card-content">
      <p>全国: {{ totalScore }}</p>
      <p>芝麻700以上: {{ score700Above }}</p>
      <p>芝麻650-700: {{ score650To700 }}</p>
      <p>芝麻600-650: {{ score600To650 }}</p>
      <p>芝麻1-600: {{ score1To600 }}</p>
      <p>无芝麻: {{ noScore }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟接口返回的数据
      responseData: {
        total: 9552,
        score700Above: 1503,
        score650To700: 3096,
        score600To650: 2585,
        score1To600: 2369,
        noScore: 0,
      },
    };
  },
  computed: {
    totalScore() {
      return this.responseData.total;
    },
    score700Above() {
      return this.responseData.score700Above;
    },
    score650To700() {
      return this.responseData.score650To700;
    },
    score600To650() {
      return this.responseData.score600To650;
    },
    score1To600() {
      return this.responseData.score1To600;
    },
    noScore() {
      return this.responseData.noScore;
    },
  },
  methods: {
    toggleDateOptions() {
      // 在此方法中可以添加逻辑来切换日期选项的显示状态
    },
  },
};
</script>

<style scoped>
.score-card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
